<template>
	<view>
		<status-bar title='选择收货地址'></status-bar>
		<view class="search">
			<view class="viewbox auto d-flex a-center  searchTop">
				<view class="flex-1 d-flex  a-center centine">
					<view class="d-flex a-center color_33 size26" @click="toUrl('cityList')">
						<text>{{cityName}}</text>
						<view class="iconfont icon-xiangxia h6 p-left10"></view>
					</view>
					<view class="iconfont icon-btn_search color_33 size30 m-left20"></view>
					<input type="text" class="flex-1 height p-left20 h6" v-model="searchName" @focus="isFlag = false"
						@confirm="searchAddress" confirm-type="search" placeholder="请输入您的收货地址"
						placeholder-class="place">
				</view>
				<view class="black size28 padding20" @click="isFlag = true" v-if="!isFlag">取消</view>
			</view>


		</view>

		<view class="viewbox auto" v-show="!isFlag">
			<view class="rows bgwhite m-top20" v-if="searchList.length">
				<view class="searchlist bot " v-for="(item,index) in searchList" :key="index" @click="selectAdd(item)">
					<text class="color_33 h6">{{item.title}}</text>
					<text class="color_99 h7 m-top10">{{item.address}}</text>
				</view>
			</view>
			<empty empty="search" v-else></empty>
		</view>

		<view class="rows" v-show="isFlag">
			<map id="myMap" :scale="18" :longitude="longitude" :latitude="latitude" @regionchange="regionchange">
				<cover-view class="current-site-title" v-if="currentAddress">{{currentAddress}}</cover-view>
				<cover-image class="current-site-icon" :src="$pop.staticImg('biaoji2.png')"></cover-image>
			</map>

			<view class="viewbox auto m-top20 color_99 size26">附近位置</view>
			<scroll-view scroll-y="true" class="scrollView">
				<view class="list" v-for="(item,index) in pois" :key="index" @click="selectAdd(item)">
					<view class="iconfont icon-a-zu3947 size28 m-top4" :class="index == 0?'current':'color_cc'"></view>
					<view class="flex-1 d-flex f-column m-left20">
						<text class="black size30 bold500">{{item.title}}</text>
						<text class="color_99 h6 m-top10">{{item.address}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
	
	let qqmapsdk;
	export default {
		data() {
			return {
				cityName: '',
				searchName: '',
				searchList: [],
				isFlag: true,
				currentAddress: '',
				longitude: 0,
				latitude: 0,
				pois: [],
				mapCtx: '',
				location: '',
			}
		},

		onLoad() {
			if (this.position) {
				this.longitude = this.position.longitude;
				this.latitude = this.position.latitude;
			}
			this.postStr();
			this.mapCtx = wx.createMapContext('myMap')
			qqmapsdk = new QQMapWX({
				key: this.qqkey
			});
		},
		onShow() {
			this.isFlag = true;
			this.searchList = [];
			if (this.searchName) this.searchAddress();
			if(this.CityInfo){
				const {fullname,location} = this.CityInfo;
				this.cityName = fullname;
				if(!location) return;
				this.latitude = location.lat;
				this.longitude = location.lng;
			}
		
			this.geocoder(this.latitude, this.longitude);
		},
		methods: {
			...mapMutations(['getAddress','SeletCity']),
		
			postStr(){
				this.$http.get_ds({
					url:'/geocoder',
					data:{
						postStr:{
							lon:this.longitude,
							lat:this.latitude,
							ver:1,
							seperate: 1
						},
						type:'json',
						tk:this.tdkey,
						
					}
				}).then(res=>{
					
				})
			},
			searchFocus() {
				this.isFlag = false;
			},
			searchAddress() {
				let that = this;
				if (!that.searchName) return;
				qqmapsdk.search({
					keyword: that.searchName,
					location: `${that.location.lat},${that.location.lng}`,
					page_size: 10,
					region: that.cityName,
					auto_extend: 0,
					success: (res => {
						const searchResult = res.data;
						that.searchList = searchResult;
					})
				})
			},
			geocoder(latitude, longitude) {
				let that = this;
				qqmapsdk.reverseGeocoder({
					location: `${latitude},${longitude}`,
					get_poi: 1,
					poi_options: 'radius=500;policy=2',
					success: (res => {
						if (res.status != 0) return;
						const result = res.result;
						if(result.formatted_addresses) that.currentAddress = result.formatted_addresses.recommend;
						
						this.cityName = result.ad_info.city;
						this.location = result.location;
						if (result.pois) that.pois = result.pois;
						const current = {
							title: result.formatted_addresses?result.formatted_addresses.recommend:'',
							address: result.address,
							ad_info: result.ad_info,
							location: result.location
						}
						that.pois.unshift(current)
					})
				})
			},

			regionchange(e) {
				if (e.type != 'end') return;
				const result = e.detail.centerLocation;
				if(result.latitude == this.latitude) return;
				this.geocoder(result.latitude, result.longitude);
			},
			selectAdd(item) {
				this.getAddress(item);
				this.$back();
			}
		},
		computed: {
			...mapState(['position', 'qqkey','CityInfo','tdkey'])
		},
		watch: {
			searchName(newVal) {
				if (newVal == '') this.searchList = []
			}
		},
		onUnload() {
			this.SeletCity('');
		},
		
	}
</script>

<style lang="scss" scoped>
	.search {
		width: 100%;

		padding: 20rpx 0;

		display: flex;
		flex-direction: column;
	}



	.searchTop {}

	.centine {
		height: 74rpx;
		padding: 0 30rpx;
		border-radius: 37rpx;
		background-color: #f7f8fa;
	}

	::v-deep.place {
		color: #ccc;
	}

	#myMap {
		width: 100%;
		height: 500rpx;
	}

	.current-site-title {
		background-color: #ffffff;
		padding: 10rpx 20rpx;
		color: #000000;
		font-size: 24rpx;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, 0);
		border-radius: 10rpx;
	}

	.current-site-icon {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.scrollView {
		width: 690rpx;
		height: 700rpx;
		margin: 20rpx auto 0;
	}

	.list {
		width: 100%;
		padding: 20rpx;
		background-color: #f7f8fa;
		display: flex;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.current {
		color: #da3131;
	}

	.searchlist {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
	}
</style>